<template>
    <el-menu 
      ref="elMenu"
      class="elMenu"
      :default-active="activeIndex"
      background-color="#333"
      text-color="#B0B0B2"
      active-text-color="#fff"
      :unique-opened="true"
      router
      @select="menuSelect"
    >
      <div style="height: 60px; line-height: 60px; text-align: center">
        <img src="../assets/logo.png" alt="" style="width: 20px; position: relative; top: 5px; margin-right: 5px">
        <b style="color: white" v-show="!isCollapse">后台管理系统</b>
      </div>
      <!-- 递归动态菜单 -->
      <MenuItem :MenuItemData="MenuItemData"></MenuItem>
    </el-menu>
  </template>

<script>
import MenuItem from './MenuItem';
import menuData from '../router/routes';
export default {
    name: 'Aside',
    props: {
        isCollapse: Boolean
    },
    components: { MenuItem },
    data(){
        return {
          activeIndex: '2',
          logoTextShow: true,
          MenuItemData: [ ...menuData ]
        }
    },
    methods: {
		menuSelect (key, keyPath) {
			console.log(key, keyPath);
		}
    },
}
</script>